<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易购物车案例</title>
    <!--引用vue.js文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" width="40%" cellspacing="0">
            <tr align="left">
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <!--v-for循环对itema数组进行遍历-->
            <tr align="left" v-for="(item,index) in items">
                <td>{{index+1}}</td>
                <td>{{item.bname}}</td>
                <td>{{item.bdate}}</td>
                <td>￥{{item.bprice}}</td>
                <td>
                    <!--@click 在点击-按钮的时候，调用remove函数，并且传参-->
                    <input :disabled="item.number==1" type="button" value="-" @click="remove(index)">
                    <span>{{item.number}}</span>
                    <!--@click 在点击+按钮的时候，调用add函数，并且传参-->
                    <input type="button" value="+" @click="add(index)">
                </td>
                <td>
                    <!--@click 在点击删除按钮的时候，调用deletItem函数，并且传参-->
                    <input type="button" value="删除" @click="deleteItem(index)">
                </td>
            </tr>
        </table>
        <h3>总价格：￥{{priceSum()}}</h3><!--调用priceSum()函数-->
    </div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [{
                bname: '《Java编程思想》',
                bdate: '2020-9',
                bprice: new Number(98).toFixed(2),  //使用Number对象固定两位小数，位数不够，0来补齐
                number: 1,
            }, {
                bname: '《数据分析与数据原理》',
                bdate: '2019-2',
                bprice: new Number(39).toFixed(2),  //使用Number对象固定两位小数，位数不够，0来补齐
                number: 1,
            }, {
                bname: '《Hadoop权威指南》',
                bdate: '2019-10',
                bprice: new Number(59).toFixed(2),  //使用Number对象固定两位小数，位数不够，0来补齐
                number: 1,
            }, {
                bname: '《代码大全》',
                bdate: '2018-8',
                bprice: new Number(128).toFixed(2), //使用Number对象固定两位小数，位数不够，0来补齐
                number: 1,
            }]
        },
        methods: {
            // 删除书记方法
            deleteItem: function (index) {
                //确认删除提示
                //alert(id);
                if (confirm("您是否确认删除？")) {
                    //删除一行元素 splice(索引,个数)
                    this.items.splice(index, 1);
                }
            },
            //增加书籍数量方法
            add: function (index) {
                //将items数组中index索引位置的number元素值+1
                this.items[index].number += 1;
            },
            //减少书记数量方法
            remove: function (index) {
                //将items数组中index索引位置的number元素值-1
                this.items[index].number -= 1;
            },
            //总金额方法
            priceSum: function () {
                //声明局部变量sum记录总金额
                var sum = 0;
                //使用for循环对items数据进行遍历
                for (var i = 0; i < this.items.length; i++) {
                    //总金额+=当前书籍金额*书籍数量
                    sum += this.items[i].bprice * this.items[i].number
                }
                //控制台打印sum的值
                console.log(sum)
                //返回sum总金额
                return sum;
                
            }
        }
    })

</script>

</html>